<template>
  <view>
    <text class="secret-info" v-if="transform != 'translateY(0)'">new skys由lzzy.soft22制作</text>
    <view class="welcome-container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" :style="bodyStyle">
      <image src="../../static/icons/icon.png" class="icon-Welcome"></image>
      <text class="welcome">WELCOME!</text>
      <text class="sub-welcome">欢迎加入new skys</text>
      <view class="upload-pic-container" @click="clickChooseImage">
        <image :src="userAvatar" mode="aspectFill" class="avatar"></image>
        <text class="input-holder">{{avatarUrl}}</text>
      </view>
      <input type="text" class="input-register-info" placeholder-class="input-holder" placeholder="请输入昵称" id="nick" @input="inputChange"/>
      <input type="text" class="input-register-info" placeholder-class="input-holder" placeholder="请输入邮箱" id="email" @input="inputChange"/>
      <input type="text" class="input-register-info" placeholder-class="input-holder" placeholder="请输入用户名" id="user"@input="inputChange"/>
      <input type="password" class="input-register-info" placeholder-class="input-holder" placeholder="请输入密码" id="password" @input="inputChange"/>
      <text class="btn input-register-info" @click="clickRegister">注册</text>
    </view>
  </view>
</template>

<script>
let pointY = 0
let pic = ''
export default {
  data() {
    return {
      avatarUrl:"请点击选择图片上传",
      transform:"translateY(0)",
      transition:'',
      userAvatar:"../../static/icons/default_user.png",
      // 添加注册页面数据
      nick: "",
      email: "",
      user: "",
      password: ""
    }
  },
  computed:{
    bodyStyle:function(){
      return {
        "transform": this.transform,
        "transition": this.transition
      }
    }
  },
  methods: {

    checkValid(){
      if (!this.$util.checkLength(this.nick, 2, "用户姓名")) {
        return false
      }
      if (!this.$util.checkLength(this.user, 3, "用户名")) {
        return false
      }
      if (!this.$util.checkLength(this.password, 6, "用户密码")) {
        return false
      }
      let regex = /^[a-zA-z0-9\u4e00-\u9fa5_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (!regex.test(this.email)) {
        uni.showToast({
          title: '邮箱格式不正确',
          icon: 'none'
        });
        return false
      }
      if (this.userAvatar=="../../static/icons/default_user.png"){
        uni.showToast({
          title: '请点击图片上传',
          icon: 'none'
        });
        return false
      }
      return true
    },
    //提交数据
    clickRegister(){
      //验证数据是否合法
      if (!this.checkValid()) {
        return
      }
      // 注册提交
      let data = {
        'nick_name': this.nick,
        'user_name': this.user,
        'avatar':pic,
        'password': this.password,
        'email': this.email
      }
      let url = this.$params.host + this.$params.action_register
      this.$request.post(url, data, res => {
        console.log(999)
        console.log(res);
        if (!res.success) {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
          return
        }
        const app = getApp()
        app.globalData.uid = res.data.id
        app.globalData.userName = res.data.userName
        app.globalData.nickName = res.data.nickName
        app.globalData.token = res.data.token
        app.globalData.avatar = res.data.avatar
        app.globalData.email = res.data.email
        app.globalData.type = res.data.type
        this.$noti.post(this.$params.noti_login_status)
        uni.navigateBack()
      },() => {

      })

    },
    inputChange(e) {
      let id = e.target.id
      // es6模板字符串，如果字符串作为变量名称，那么引用该变量就要使用模版字符串，将该变量名作为差值，并在外层使用括号
      this[`${id}`] = e.detail.value
    },
    clickChooseImage() {
      let url = this.$params.host + this.$params.action_upload
      uni.chooseImage({
        count: 1,
        success: res => {
          let path = res.tempFilePaths[0]
          this.$request.postFile(url, 'file', path, {}, res => {
            uni.hideLoading()
            let json = JSON.parse(res.data)
            if (json.success){
              this.avatarUrl = json.data
              pic = json.data
              this.userAvatar=this.$params.host+json.data
            }
          },() => {

          })
        }
      })
    },
    touchStart(e){
      pointY = e.touches[0].clientY
    },
    touchMove(e){
      let distance = e.touches[0].clientY - pointY
      if(distance > 150){
        distance = 150
      }
      if(distance < 50){
        return
      }
      this.transform = `translateY(${distance}rpx)`
      this.transition = ""
    },
    touchEnd(e){
      this.transform = 'translateY(0)'
      this.transition = 'transform 800ms linear'
    }
  }
}
</script>

<style>
@import url('register.css');
</style>